<template>
	<view>
		<view class="h30"></view>
		<view class="wrap  ml26 mr23">
			<view class="">
				<view class="item">
					<view class="flex-between flex-align">
						<view class="left">头像</view>
						<view class="right flex-align" @click="changeAvatar">
							<view class="msg"><u-avatar :src="userInfo.uavatar"></u-avatar></view>
							<view class=""><u-icon name="arrow-right" mp-avatar="true"></u-icon></view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="flex-between flex-align">
						<view class="left">用户名</view>
						<view class="" v-if="nameShow === false"><input type="text" placeholder="" ref="ref" @blur="blur" focus="true" /></view>
						<view class="right flex-align" @click="changeName">
							<view class="msg" v-if="nameShow === true">{{ changeInfo.unickName }}</view>
							<view class=""><u-icon name="arrow-right"></u-icon></view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="flex-between flex-align">
						<view class="left">性别</view>
						<view class="right flex-align" @click="changeSex">
							<view class="msg">{{ changeInfo.usex }}</view>
							<u-picker
								style="background: #000;"
								:show="show"
								:closeOnClickOverlay="true"
								@close="show = true"
								:columns="columns"
								@confirm="confirmSex"
								@cancel="cancelSex"
							></u-picker>
							<view class=""><u-icon name="arrow-right"></u-icon></view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="flex-between flex-align">
						<view class="left">生日</view>
						<view class="right flex-align" @click="changeBrith">
							<view class="msg">{{ $u.timeFormat(changeInfo.ubirthday) }}</view>
							<u-datetime-picker
								closeOnClickOverlay
								@close="show2 = true"
								:show="show2"
								v-model="value2"
								mode="date"
								@confirm="confirmDate"
								@cancel="cancelDate"
							></u-datetime-picker>
							<view class=""><u-icon name="arrow-right"></u-icon></view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="flex-between flex-align">
						<view class="left">关联手机</view>
						<view class="right flex-align">
							<view class="msg">{{ changeInfo.uphone }}</view>
							<view class=""><u-icon name="arrow-right"></u-icon></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapState, //先导入mapState方法
	mapMutations,
	mapActions
} from 'vuex';
import base from '@/utils/env.js';
export default {
	data() {
		return {
			aa: '',
			src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
			show: false,
			columns: [['男', '女']],
			show2: false,
			value2: Number(new Date()),
			/* 男女显示 */
			sexShow: '',

			/* 输入框切换 */
			nameShow: true,
			/*  */
			changeInfo: {
				friendCount: '',
				groupCount: '',
				uaccount: '',
				uage: '',
				uavatar: '',
				ubirthday: '',
				ucode: '',
				uconstellation: '',
				uemail: '',
				uhometown: '',
				unickName: '',
				uoccupation: '',
				upersonalSign: '',
				uphone: '',
				urealName: '',
				uschool: '',
				userId: '',
				usex: ''
			}
		};
	},
	methods: {
		...mapActions('user', ['setUserInfoAction', 'wxGetUserInfo']),
		changeUser() {
			this.setUserInfoAction();
		},
		changeAvatar() {
			var that = this;
			uni.chooseMedia({
				count: 9,
				mediaType: ['image', 'video'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				success(res) {
					for (let i = 0; i < res.tempFiles.length; i++) {
						uni.uploadFile({
							url: base.baseUrl + '/file//upload',
							// url: 'http://imquanzi.com/file/upload', // 仅为示例，非真实的接口地址
							name: 'file',
							filePath: res.tempFiles[i].tempFilePath,
							method: 'POST',
							header: {
								Authorization: uni.getStorageSync('token')
							},
							success: async res => {
								console.log(res, 're');
								console.log(JSON.parse(res.data).data);
								console.log();
								let url = JSON.parse(res.data).data.url;
								console.log(that.changeInfo, 'that.changeInfo');
								that.changeInfo.uavatar = url;
								/* 修改信息 */
								await that.setUserInfoAction(that.changeInfo);
								/* 获取最新信息 */
								await that.wxGetUserInfo();
							},
							fail: err => {
								console.log(err);
							}
						});
					}
				}
			});
		},
		blur(e) {
			this.nameShow = !this.nameShow;
			// console.log(e);
			if (!e.detail.value.trim()) {
				// console.log(e.detail.value.trim(), 'e.detail.value.trim()');
				// console.log('空不执行');
				return;
			}
			this.changeInfo.unickName = e.detail.value.trim();
			/* 修改信息 */
			this.setUserInfoAction(this.changeInfo);
			/* 获取最新信息 */
			this.wxGetUserInfo();
			console.log('有值执行');
		},
		changeName() {
			this.nameShow = !this.nameShow;
			uni.showKeyboard();
		},
		changeSex() {
			this.show = !this.show;
		},
		cancel() {},
		changeBrith() {
			this.show2 = !this.show2;
		},
		confirmSex(e) {
			this.show = false;
			console.log(this.show, 'this.show');
			if (e.value[0] === '男') {
				this.changeInfo.usex = '男';
			} else if (e.value[0] === '女') {
				this.changeInfo.usex = '女';
			}
			this.setUserInfoAction(this.changeInfo);
			/* 获取最新信息 */
			this.wxGetUserInfo();
			console.log(e, 'e');
		},
		cancelSex() {
			this.show = false;
		},
		confirmDate(e) {
			this.show2 = false;
			const timeFormat = uni.$u.timeFormat;
			this.changeInfo.ubirthday = e.value;
			this.setUserInfoAction(this.changeInfo);
			/* 获取最新信息 */
			this.wxGetUserInfo();
			console.log(timeFormat(e.value, 'yyyy-mm-dd'));
			// console.log(timeFormat(e.value, 'yyyy-mm-dd hh:MM'))
			// console.log(timeFormat(e.value, 'yyyy-mm'))
		},
		cancelDate() {
			this.show2 = false;
		},
		changePhone() {
			uni.chooseImage({
				success() {}
			});
		}
	},
	onShow() {
		this.changeInfo = this.userInfo;
		console.log(this.userInfo, 'this.userInfo');
	},
	computed: {
		...mapState('user', ['userInfo'])
	}
};
</script>

<style lang="scss">
page {
	background-color: #f8f8f8 !important;
}
.wrap {
	background-color: #fff;
	border-radius: 10rpx;
}
.ml26 {
	margin-left: 26rpx;
}
.mr23 {
	margin-right: 23rpx;
}
.item {
	padding-top: 20rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	height: 80rpx;
}
.left {
	// width: 128rpx;
	width: 150rpx;
}
.right .msg {
	margin-right: 20rpx;
}
</style>
